<template>
  <a-card :bordered="false">
    <div class="container">
      <div class="needs">
        <div class="wid" style="padding-right: 5px">
          <div class="wrap">
            <div class="page-tit">
              <div class="fr"><i>*</i><span>为必填项</span></div>
            </div>
            <div class="item">
              <div class="title"><b style="color: #2d2d2d;font-size: 16px;margin-bottom: 16px;margin-top: -10px">纽扣基本信息</b></div>

              <a-row :gutter="24">
                <a-col :xl="7" :lg="7" :md="8" :sm="24">
                  <a-form-item label="纽扣编号" required>
                    <a-input style="margin-top: 0px;width: 200px;"  placeholder="请输入纽扣编号" v-model="buttonsCode" onkeyup="value=value.replace(/[\u4e00-\u9fa5]/ig,'')"></a-input>
                  </a-form-item>
                </a-col>

                <a-col :xl="7" :lg="7" :md="8" :sm="24">
                  <a-form-item label="纽扣类型" required>
                    <a-select
                      v-model="categoryId"
                      style="width: 200px"
                      class="
				input"
                      placeholder="请选择纽扣的类型"
                    >
                      <a-select-option v-for="item in categoryList" :value="item.id.toString()"  :key="item.id" :label="item.categoryName">
                        {{item.categoryName}}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>

                <a-col :xl="7" :lg="7" :md="8" :sm="24">
                  <a-form-item label="排序">
                    <a-input    style="width: 200px"  type="number" v-model="sortField"></a-input>
                  </a-form-item>
                </a-col>
              </a-row>
            </div>

            <div class="item">
              <a-row :gutter="24">
                <a-col :xl="7" :lg="7" :md="8" :sm="24">
                  <a-form-item label="售价加价" required>
                    <a-input style="width: 200px;"  placeholder="请设置售价加价" v-model="retailPrice"></a-input>
                    <span style="margin-left: 5px">￥/元</span>
                  </a-form-item>
                </a-col>

                <a-col :xl="7" :lg="7" :md="8" :sm="24">
                  <a-form-item label="成本加价" required>
                    <a-input style="width: 200px;"  placeholder="请设置成本加价" v-model="costPrice"></a-input>
                    <span style="margin-left: 5px">￥/元</span>
                  </a-form-item>
                </a-col>



                <a-col :xl="7" :lg="7" :md="8" :sm="24">
                  <a-form-item label="供应商" required>
                    <a-select
                      class="
		        input"
                      style="width: 200px"
                      v-model="sysuserId"
                      placeholder="请选择供应商"
                    >
                      <a-select-option :label="item.realname" :value="item.id"  v-for="(item,key) in gyslist" :key="item.realname">
                        {{item.realname}}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>

              </a-row>
            </div>


            <div class="item">

              <div style="width: 100%;overflow: hidden;">
                <!--    <div class="box_ss1" style="width: 300px;float: left;margin-right: 40px">
                    <p><span>纽扣图片</span></p>
                                    <a-form-item label="" :labelCol="labelCol" :wrapperCol="wrapperCol">
                                     <j-image-upload class="avatar-uploader" text="上传" v-model="buttonsImg" style="margin-top: 8px;"></j-image-upload>

                                    </a-form-item>
                    </div> -->
                <!-- <div class="box_ss2" style="width: 640px;float: left;"> -->


                <a-row :gutter="24">


                  <a-col :xl="7" :lg="7" :md="8" :sm="24">
                    <a-form-item label="纽扣图片" required>
                      <j-image-upload class="avatar-uploader" text="上传" v-model="buttonsImg" ></j-image-upload>
                    </a-form-item>
                  </a-col>

                  <a-col :xl="7" :lg="7" :md="8" :sm="24">
                    <a-form-item label="备注">
                      <a-textarea placeholder="请填写你的备注" :rows="4"  v-model="remark" style="width: 380px;"/>
                    </a-form-item>
                  </a-col>
                </a-row>
              </div>
            </div>

            <div class="submit">
              <button class="c1" @click="addCustomer()">保存提交</button>
              <!--   <button class="c2">重置</button> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </a-card>
</template>

<script>
  import '@/assets/less/TableExpand.less'
  import {
    mixinDevice
  } from '@/utils/mixin'
  import {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'
  import '@/assets/less/TableExpand.less'
  import JAreaLinkage from '@comp/jeecg/JAreaLinkage'
  import JDate from '@/components/jeecg/JDate.vue'
  import {
    deleteAction,
    getAction,
    putAction,
    postAction,
    downFile,
    getFileAccessHttpUrl
  } from '@/api/manage'
  // 引入搜索部门弹出框的组件
  import JImageUpload from '../../components/jeecg/JImageUpload'

  export default {
    name: "addButton",
    mixins: [mixinDevice, JeecgListMixin],
    components: {
      JDate,
      JAreaLinkage,
      JImageUpload
    },
    data() {
      let self = this
      return {
        postingtitle: '',
        sortField: 0,
        gysList: {},
        categoryId: '请选择纽扣类型',
        categoryList: { //用来存放取到的品类

        },
        businessLicense: '', //营业执照
        colorType: '',
        libuType: '',
        buttonsCode: '',
        buttonsName: '',
        sysuserId: '请选择供应商',
        brandLabels: '',
        brand: '',
        retailPrice: '',
        costPrice: '',
        isMonth: 0,
        buttonsImg: '',
        inventory: '',
        remark: '',
        isshenhe: '',//需求是否需要审核
        flag: false, //数据验证的最终结果
        url: {
          list: "/total/sys_user/query_totalSysuser_Detail",
          detail: "/ButtonManage/getButtonbyId",
          add: "/ButtonManage/addButton",
          update: "/ButtonManage/updateButton",
          pingleilist: "/ButtonManage/getallButtonCategory",
          gysList: '/fabricCenter/selectGYS', // 供应商列表
        },
        dialogVisible: false,
        dictOptions: {},
      }
    },
    created() {
		   this.getgys();
      if(this.$route.query.id==0){
        console.log("这个是新增方法");
		 this.getallcategory();
      }else{
        console.log("这个是编辑方法");
		this.getallcategory();

          let id=this.$route.query.id;
          getAction(this.url.detail,{"id":id}).then((res)=>{
              if(res.success){
                this.buttonsName=res.result.buttonsName;
               this.buttonsCode=res.result.buttonsCode;
                this.buttonsImg=res.result.buttonsImg;
                   this.inventory=res.result.inventory;
                   this.retailPrice=res.result.retailPrice;
                   this.costPrice=res.result.costPrice;
                   this.sysuserId=res.result.sysuserId;
                   this.remark=res.result.remark;
				   this.categoryId=res.result.categoryId;
				   this.sortField=res.result.sortField;
              }else{
                this.$message.warning(res.message);
              }
            })
      }

    },
    computed: {
      uploadAction: function() {
        return this.url.fileUpload;
      }
    },
    methods: {
			getgys() { // 获取供应商列表
			  getAction(this.url.gysList).then(res => {
			    this.gyslist = res.result
			  })
			},
			//查询纽扣品类
			    getallcategory(){
			     getAction(this.url.pingleilist).then((res)=>{
			        if(res.success){
			         this.categoryList=res.result;
			        }else{
			          that.$message.warning(res.message);
			        } })
			},
       //上传图片成功函数
      handleSuccess(response, file, fileList) {
        var result = response;
        this.buttonsImg = result.data;
      },
     addCustomer(){
       var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
       if(this.buttonsCode==''){
         this.$message.warning("未输入编号，请输入");
         return;
       };
       if(this.categoryId=='' || this.categoryId=='请选择纽扣类型'){
         this.$message.warning("未选择纽扣类型，请选择");
         return;
       };
       if(this.retailPrice==''){
         this.$message.warning("未输入售价加价，请输入");
         return;
       };
       if(!reg.test(this.retailPrice)){
         this.$message.warning("请输入正确的售价加价金额")
         return
       }
       if(this.costPrice==''){
         this.$message.warning("未输入成本加价，请输入");
         return;
       };
       if(!reg.test(this.costPrice)){
         this.$message.warning("请输入正确的成本加价金额")
         return
       }
       if(this.sysuserId=='' || this.sysuserId=='请选择供应商'){
         this.$message.warning("未选择供应商，请选择");
         return;
       };
       if(this.buttonsImg=='' || this.buttonsImg==null){
         this.$message.warning("请上传纽扣图片");
         return;
       };
       let formData={
              "id":this.$route.query.id,
             "buttonsName":this.buttonsName,
             "buttonsCode":this.buttonsCode,
             "sysuserId":this.sysuserId,
              "categoryId":this.categoryId,
             "retailPrice":this.retailPrice,
              "costPrice":this.costPrice,
              "inventory":this.inventory,
              "remark":this.remark,
			  "buttonsImg":this.buttonsImg,
			  "sortField":this.sortField
       };
             let url;
            if(this.$route.query.id==0){
              url=this.url.add;
            }else{
                 url=this.url.update;
            }
           postAction(url,formData).then((res)=>{
              if(res.success){
                this.$message.success(res.message);
                this.$router.push({path:'/ButtonManage'})
              }else{
                this.$message.warning(res.message);
              }
            }).finally(() => {
              this.confirmLoading = false;
              this.close();
            })
     },

      /**
       * 解析经纬度成地址
       * @param pos
       */
      setAssres(pos) {
        let self = this
        // 这里通过高德 SDK 完成。
        let geocoder = new AMap.Geocoder({
          radius: 1000,
          extensions: "all"
        })
        self.curMarker = pos
        geocoder.getAddress(pos, function(status, result) {
          if (status === 'complete' && result.info === 'OK') {
            if (result && result.regeocode) {
              self.map_address = result.regeocode.formattedAddress;
              self.$nextTick();
            }
          }
        })
      },
      /**
       * 搜索
       * @param pois
       */
      onSearchResult(pois) {
        console.log('pois', pois)
        let latSum = 0;
        let lngSum = 0;
        if (pois.length > 0) {
          let pos = pois[0]
          this.center = [pos.lng, pos.lat]
          this.setAssres(this.center)
        }
      },
      initDictConfig() {

      },
      getPcaText(code) {
        return this.pcaData.getText(code);
      },

    },
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
  @import '~@assets/less/style.min.css';
  @import '~@assets/less/addzhaopin.css';
  @import '~@assets/less/newstyle.css';
</style>
